<%@page import="com.mz.base.util.ATTSystem"%>
<%@ page language="java" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
  	<head>
	    <title>登录-哈泊客户关系管理系统</title>
	    <jsp:include page="/commons/head.jsp"></jsp:include>
		<style type="text/css">
			body {background-color:#15296e;}
			.BOX {background-image:url(/images/login_bg.jpg);background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;position:absolute;height:100%;width:100%;}
			.loginBox {width:300px;margin:100px auto;background-color:rgba(255,255,255,0.93);border-radius:2px;border:2px solid #f5f5f5;display:none;}
			.loginBox .userLogin {color:#f26828;padding:5px 15px;border-bottom:1px solid #ecf6f8;}
			.loginBox .userLogin span {color:#ffd8ac;font-size:10px;margin-left:10px;}
			.loginBox .logo {text-align:center;padding:10px 0px;}
			.loginBox .logo img {max-height:35px;}
			.loginBox .item {margin:10px 30px;position:relative;}
			.loginBox .item .icon {position:absolute;top:left;top:8px;left:6px;}
			.loginBox .item .inp {width:210px;padding:10px 0px 10px 30px;border:1px solid #bcc9d2;border-radius:3px;font-size:10px;}
			.loginBox .item .authImg {border:1px solid #bcc9d2;max-height:34px;position:absolute;right:0px;cursor:pointer;border-radius:3px;}
			.loginBox .item .btn {width:100%;background-color:#f26828;border:1px solid #ee6627;padding-left:0px;color:#fff;font-size:14px;}
			.foot {position:absolute;bottom:10px;color:#c0c0c0;text-align:center;font-size:10px;width:100%;}
		</style>
  	</head>
  
  	<body>
    	
    	<div class="BOX">
    	
	    	<div class="loginBox">
	    		<form class="layui-form" action="">
	    			<div class="userLogin">用户登录<span>UserLogin</span></div>
	    			<div class="logo"><img src="/images/logo.png"/></div>
	    			
	    			<div class="item">
	    				<i class="icon icon-account-ccc"></i>
	    				<input type="text" class="inp" name="userName" placeholder="账号" maxlength="20"/>
	    			</div>
	    			<div class="item">
	    				<i class="icon icon-pwd-ccc" style="left:7px;"></i>
	    				<input type="password" class="inp" name="password" placeholder="密码" maxlength="20"/>
	    			</div>
	    			<div class="item">
	    				<i class="icon icon-security-ccc" style="top:8px;"></i>
	    				<input type="text" class="inp" name="authCode" placeholder="验证码" maxlength="4" style="width:80px;"/>
	    				<input type="hidden" name="authCodeKey" value="KEY_AUTH_LOGIN"/>
	    				<img src="/AuthCode/KEY_AUTH_LOGIN" class="authImg" id="img-AUTHCODE"/>
	    			</div>
	    			<div class="item">
	    				<input type="checkbox" name="rememberPassword" title="记住密码" lay-skin="primary"/>
	    			</div>
	    			<div class="item">
	    				<input type="button" id="btnLogin" class="inp btn" lay-submit lay-filter="login" value="登 &nbsp; 录"/>
	    			</div>
	    		</form>
	    	</div>
	    
	    </div>
    	
    	<div class="foot">CopyRight © 2017 HABO</div>
    	
  	</body>
</html>
<script type="text/javascript">
layui.use('form', function(){
	var form = layui.form();

	var userNameCookie = getCookie('userName', 'N');
	var passwordCookie = getCookie('password', 'N');
	if(userNameCookie!=null){
		$('input[name=userName]').val(userNameCookie);
		$('input[name=password]').val(passwordCookie);
		$('input[name=rememberPassword]').siblings().click();
	}
	
	form.on('submit(login)', function(data){
		var field = data.field;
		if(field.userName==''){
			layer.msg('请输入账号');
		}else if(field.userName.match(ZZ_USER_NAME)==null){
			layer.msg('账号格式错误');
		}else if(field.password==''){
			layer.msg('请输入密码');
		}else if(field.password.match(ZZ_PASSWORD)==null){
			layer.msg('密码格式错误');
		}else if(field.authCode==''){
			layer.msg('请输入验证码');
		}else if(field.authCode.length!=4){
			layer.msg('验证码错误');
		}else{
			if(field.rememberPassword == 'on'){
				setCookie('userName', field.userName);
				setCookie('password', field.password);
			}else{
				delCookie('userName');
				delCookie('password');
			}
			
			var index = layer.load(1, {shade: [0.1, '#fff']});
			setTimeout(function(){
				$.ajax({
					url : '/login',
					data : field,
					dataType : 'json',
					success : function(data){
						layer.close(index);
						if(data.code==1){
							layer.msg('登录成功');
							setTimeout(function(){
								window.location.href = '/index.jsp';	
							}, 2000);
						}else{
							layer.msg(data.msg);
						}
					},
					error : function(){
						layer.msg('数据连接失败');
					}
				});
			}, 1);
		}
    	return false;
	});
	
	resize();
	
	$(window).resize(function(){
		resize();
	});
	
	$('#img-AUTHCODE').click(function(){
		$(this).attr('src', '/AuthCode/KEY_AUTH_LOGIN?t='+(new Date().getTime()));
	});
	
	$('input[name=userName], input[name=password], input[name=authCode]').keyup(function(){
		if(event.keyCode==13){
			$('#btnLogin').click();
		}
	});

});

function resize(){
	$('.loginBox').css({'margin-top' : (($('.BOX').height()-$('.loginBox').height())/5)*2+'px'}).show();
}
</script>